import brandApi from "@/api/brandApi";
import dateTime from "@/utils/dateutils";


export default {
    name: "index",
    data() {
        return {
            pickerOptions: dateTime.pickerOptions,
            value2: dateTime.value2,
            searchForm: {
                currentPage: 1,
                pageSize: 5,
            },
            tableData: [],
            total: 0,
            editDialog: false,
            formData: {
                brandLogo: ""
            },
            ids: [],
            //表单校验的独享
            formRules: {
                brandName: [
                    {required: true, message: '请输入品牌名称', trigger: 'blur'},
                ],
                brandSite: [
                    {required: true, message: '请输入品牌网址', trigger: 'blur'},
                    {type: 'url', message: '请输入正确的网址', trigger: 'blur'},
                ],
                brandDesc: [
                    {required: true, message: '请输入品牌描述', trigger: 'blur'},
                ],
            }
        }
    },
    created() {
        this.searchPage();
    },

    methods: {
        //////////////////////业务逻辑的方法//////////////////
        /*分页条件查询*/
        async searchPage() {
            let result = await brandApi.searchPage(this.searchForm);
            console.log(result)
            this.tableData = result.data;
            this.total = result.total;
        },


        /*添加或者修改品牌*/
        addOrEdit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    if (this.formData.id) {
                        await brandApi.updateBrand(this.formData);
                    } else {
                        await brandApi.addBrand(this.formData);
                    }
                    this.searchPage();
                    this.editDialog = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });


        },

        /*删除品牌*/
        async batchDelete() {
            await brandApi.batchDelete(this.ids);
            this.searchPage();
        },

        /**通过id查询*/
        async findById(id) {
            this.formData = await brandApi.findById(id);
        },


        //////////////////////处理页面效果////////////////////////////
        chooseTime(value) {
            this.searchForm.startTime = value[0],
                this.searchForm.endTime = value[1]
        },


        /*点击分页效果*/
        pageChangeHandler(page) {
            this.searchForm.currentPage = page;
            this.searchPage();
        },
        /*重置查询表单*/
        resetSearchForm() {
            this.searchForm = {
                currentPage: 1,
                pageSize: 5,
            };

            this.value2 = [];
        },
        /*选择图片*/
        getImgBaseStr(e) {
            var fileReader = new FileReader();
            fileReader.readAsDataURL(e.file);
            fileReader.onloadend = (e) => {
                console.log(e.target.result);
                this.formData.brandLogo = e.target.result;
            }
        },
        /*点击列表中的点击删除*/
        itemBtnClick(row) {
            this.$refs.table.clearSelection();
            this.$refs.table.toggleRowSelection(row)
            this.ids = [];
            this.ids.push(row.id);
        },
        /*勾选框发生改变*/
        selectChange(selection) {
            console.log(selection)
            this.ids = [];
            var map = selection.map(item => item.id);
            map.forEach(item => {
                this.ids.push(item)
            })
        },
        /*点击批量删除*/
        doBatchDelete() {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //做删除的功能
                this.batchDelete();
            }).catch(() => {
                //取消的功能
                this.$refs.table.clearSelection();
                this.ids = []
            });
        },

        /**
         * 取消删除
         */
        batchDeleteCancel() {
            this.$refs.table.clearSelection();
        }
    }
}
